<template>
	<view class="content">
		<!-- 卡片部分 -->
		<view class="card">
			<view class="card_top">
				<text class="text_vip">美VIP</text>
				<text class="text_fuli">会员福利</text>
			</view>
			<view class="card_xiaofei">
				消费购买指定商品满365元
			</view>
			<view class="card_shengji">
				即可升级为美VIP会员1年，享受六大会员权益；
			</view>
			<view class="card_bottom">
				<view class="public">优先预约</view>
				<view class="public">优惠折扣</view>
				<view class="public">免费体验</view>
			</view>
			<view class="card_footer">
				本活动最终解释权归本平台所有
			</view>
		</view>
		<!-- 会员福利部分 -->
		<view class="fuli">
			<view class="title">会员福利</view>
			<view  class='public' v-for="(item,index) in vipList " :key='index'>
				{{item}}
			</view>
			
		</view>
		<!-- 列表部分 -->
		<view class="lists" v-for="(item,index) in lists" :key='index'>
			<view class="type">{{item.type}}</view>
			<view class="lists_infor">
				<view class="lists_img">
					<image src="../../../static/home/2.jpg" mode=""></image>
				</view>
				<view class="infor">
					<view class="name">{{item.name}}</view>
					<view class="text">{{item.infor}}</view>
					<view class="price">
						<text class="now_price">￥{{item.now_price}}</text>
						<text class="old_price">原价:<text class="old">{{item.old_price}}元</text></text>
					</view>
					<view class="rad">
						<label class="radio">
							<radio value="" color="#00C6C2" /><text></text>
						</label>
					</view>
					
				</view>
			</view>
		</view>
		<!-- //立即购买 -->
		<view class="footer">
			立即购买
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				vipList:['1、赠送一份价值365元的精美产品大礼包',
				'2、享有平台设计师和品牌馆项目服务的VIP价格',
				'3、享有平台优先预约和平台售后服务；',
				'4、平台购买美妆商品，还想享受双倍积分奖励',
				'5、消费返利、积分兑换线下服务项',
				'6、自用省钱、分享赚钱，“美丽天使”'	
				],//'会员介绍'
				lists:[
					{
						type:'套餐一',
						img_url:'',
						name:'欧莱雅植物洗护套装1套',
						infor:'洗发水*1瓶+护发素*1瓶500ml+500ml',
						now_price:'365',
						old_price:'580',
						start:'true'
					},
					{
						type:'套餐二',
						img_url:'',
						name:'资生堂花样保湿面膜10盒1套',
						infor:'美白*5盒+保湿*5盒25ml',
						now_price:'365',
						old_price:'680',
						start:'false'
					},
					{
						type:'套餐三',
						img_url:'',
						name:'美奇丝换活美容套装1套',
						infor:'洗面奶*1只+保湿*1只+乳液*1只200ml+125g+80g',
						now_price:'365',
						old_price:'620',
						start:'false'
					},
				]//列表数据
			}
			
		}
	}

</script>
<style>
	page {
		background-color: #F7F7F7;
		padding-bottom: 100rpx;
	}
</style>
<style scoped lang="less">
	.content {

		padding-top: 62rpx;
		padding-right: 25rpx; 
		padding-left: 25rpx;
		width: 100%;
		height: 100%;

		.card {
			width: 700rpx;
			height: 304rpx;
			padding-top: 24rpx;
			padding-bottom: 20rpx;
			// padding-left: 54rpx;
			background: linear-gradient(84deg, #3E3D3B 0%, #353535 100%);
			box-shadow: 0px 2rpx 25rpx 0px rgba(126, 126, 126, 0.4);
			border-radius: 15rpx;

			.card_top {
				// margin-top: 24rpx;
				width: 100%;
				margin-left: 54rpx;

				.text_vip {
					opacity: 0.7;
					font-size: 56rpx;
					font-family: PingFang;
					font-weight: 500;
					font-style: italic;
					color: #ECCFB0;
				}

				.text_fuli {
					margin-left: 15rpx;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #EFCEAD;
					opacity: 0.7;
				}
			}

			.card_xiaofei {
				margin-left: 54rpx;
				margin-top: 31rpx;
				opacity: 0.7;
				font-size: 36rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #EFCEAD;
			}

			.card_shengji {
				margin-top: 18rpx;
				margin-left: 54rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #EFCEAD;
				opacity: 0.7;
			}

			.card_bottom {
				width: 100%;
				margin-top: 20rpx;
				padding-left: 54rpx;

				.public {
					display: inline-block;
					margin-right: 32rpx;
					opacity: 0.7;
					width: 90rpx;
					height: 37rpx;
					border: 1rpx solid #ECCFB0;
					box-shadow: 0px 2rpx 25rpx 0px rgba(181, 150, 117, 0.4);
					border-radius: 6rpx;
					text-align: center;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #ECCFB0;
					line-height: 37rpx;
				}
			}

			.card_footer {
				margin-left: 54rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #EFCEAD;
				opacity: 0.7;
				margin-top: 10rpx;
				// margin-bottom: 20rpx;
			}
		}

		.fuli {
			margin-top: 61rpx;
			
			.title{
				margin-bottom: 40rpx;
			}
			.public{
				
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #5A5A5A;
				line-height: 30rpx;
				margin-bottom: 17rpx;
			}
		}
		.lists{
			width:698rpx;
			height: 280rpx;
			background: #FFFFFF;
			box-shadow: 0px 0rpx 7rpx 0px rgba(90, 90, 90, 0.15);
			border-radius: 6rpx;
			margin-top: 45rpx;
			padding-top: 31rpx;
			
			.type{	
				font-size: 32rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #000000;
				line-height: 30rpx;
				margin-left: 25rpx;
				margin-bottom: 10rpx;	
			}
			.lists_infor{
				// width: 100%;
				// height: 100rpx;
				margin-top: 35rpx;
				// border: 1px solid red;
				padding-left: 25rpx;
				display: flex;
				position: relative;
				.lists_img{
					width:270rpx ;
					height: 180rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.infor{
					margin-left: 29rpx;
					.name{
						
						
						font-size: 28rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #282828;
						line-height: 30rpx;
					}
					.text{
						margin-top: 21rpx;
						width: 346rpx;
						height: 55rpx;
						font-size: 22rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #5A5A5A;
						line-height: 30rpx;
					}
					.price{
						margin-top: 10rpx;
						.now_price{
							font-size: 30rpx;
							font-family: PingFang;
							font-weight: bold;
							color: #000000;
							line-height: 30px;
						}
						.old_price{
							margin-left: 22rpx;
							font-size: 22rpx;
							font-family: PingFang;
							font-weight: 300;
							color: #000000;
							line-height: 30rpx;
							.old{
								margin-left: 10rpx;
							}
						}
					}
					.rad{
						position: absolute;
						right: 17rpx;
						bottom: 0;
						
						u-radio{
							width: 36rpx;
							height: 36rpx;
						}
					}
					
				}
			}
		}
		.footer{
			width: 100%;
			height: 88rpx;
			background-color: #00C6C2;
			position: fixed;
			bottom:0;
			left: 0;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
			// opacity: 0.7;
		}
	}
</style>
